import React from 'react';
import { View, Text, TextInput, Image, TouchableOpacity,ScrollView,WebView } from 'react-native';
import { format } from 'date-fns';

import BasePage from '../common/BasePage';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import {DateUtils, HtmlUtils} from '../../utils/Utils';

const typeValue = ['', '对App的建议或意见', '文体活动建议或意见', '投诉或举报'];

export default class FeedbackCommentPage extends BasePage {
	constructor(props) {
		super(props);
		let data = this.props.pageData.routeData.data;
		this.state = {
			data
		};
		// console.log('FeedbackCommentPage-constructor', this.props.pageData);
	}
	componentWillUpdate(nextProps, nextState) {
		nextState.data=nextProps.pageData.routeData.data;
	}
	render() {
		const { type, create_at, title, comment,is_comment } = this.state.data;
		return (
			<View
				style={{
					width: SizeUtils.getWindowSize().width,
					height: SizeUtils.getWindowSize().height,
					paddingTop: Config.paddingTop,
					backgroundColor:'#fff'
				}}
			>
				<ScrollView style={{flex:1,}} showsVerticalScrollIndicator={false} bounces={false}>
				<View style={{ paddingHorizontal: SizeUtils.translateDesignWidthToCode(28) }}>
					<Text
						style={{
							marginTop: SizeUtils.translateDesignHeightToCode(50),
							color: '#000000',
							fontSize: SizeUtils.translateFontSizeToCode(44)
						}}
					>
						{typeValue[type]}
					</Text>
					<View
						style={{
							flexDirection: 'row',
							marginTop: SizeUtils.translateDesignHeightToCode(42)
						}}
					>
						<Text
							style={{
								color: '#474747',
								fontSize: SizeUtils.translateFontSizeToCode(22),
								marginRight: SizeUtils.translateDesignWidthToCode(25)
							}}
						>
							{format(create_at, 'YYYY.MM.DD HH:mm')}
						</Text>
						{this.getItemCommentType(is_comment===1)}
					</View>
					<Text
						style={{
							width:
								SizeUtils.getWindowSize().width -
								SizeUtils.translateDesignWidthToCode(56),
							marginTop: SizeUtils.translateDesignHeightToCode(56),
							marginBottom: SizeUtils.translateDesignHeightToCode(53),
							color: '#323232',
							fontSize: SizeUtils.translateFontSizeToCode(30)
						}}
					>
						{title}
					</Text>
				</View>
				<View
					style={{
						height: SizeUtils.translateDesignHeightToCode(20),
						backgroundColor: '#f2f2f2'
					}}
				/>
				<View style={{ paddingHorizontal: SizeUtils.translateDesignWidthToCode(28) }}>
					<Text
						style={{
							marginTop: SizeUtils.translateDesignHeightToCode(30),
							fontSize: SizeUtils.translateFontSizeToCode(26),
							color: '#000000'
						}}
					>
						{is_comment===1?'收到的回复:':'未收到回复'}
					</Text>
					{
						comment.indexOf("style")?
						this._renderWebViewContent()
						:<Text
						style={{
							marginTop: SizeUtils.translateDesignHeightToCode(20),
							marginBottom: SizeUtils.translateDesignHeightToCode(20),
							width:
								SizeUtils.getWindowSize().width -
								SizeUtils.translateDesignWidthToCode(56),
							fontSize: SizeUtils.translateFontSizeToCode(26),
							color: '#66686B'
						}}
					>
						{comment}
					</Text>
					}
					
				</View>
				</ScrollView>
				{this._renderNavigationBar()}
			</View>
		);
	}
	_renderWebViewContent() {
    return (<WebView style={{width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
      marginLeft:SizeUtils.translateDesignWidthToCode(40),
      marginRight:SizeUtils.translateDesignWidthToCode(40),
      marginTop:SizeUtils.translateDesignHeightToCode(36),
      height:this.state.height - SizeUtils.translateDesignHeightToCode(76 - 20)}}
    onNavigationStateChange={(title)=>{
      // console.log("onNavigationStateChange",title)
        if(title.title != undefined) {
          this.setState({
            height:(parseInt(title.title)+60)
          })
        }
        if(title.url && title.url!="" && title.url.indexOf("about:blank")<0
            && title.url.indexOf("react-js-navigation://postMessage") < 0
            && title.url.indexOf("data:text/html") != 0){
          var myUrl = title.url;
          if(Platform.OS === "android" && (myUrl.indexOf(".doc") > 0 || myUrl.indexOf(".xls") > 0 || myUrl.indexOf(".ppt") > 0)){
            myUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + myUrl;
          }
          this.gotoPage(Config.pages.post_common_web, {url:myUrl});
        }
      }}
    scrollEnabled={false}
    javaScriptEnabled={true}
    source={HtmlUtils.getHtmlWeb(this._getContent(this.state.data),
      SizeUtils.getWindowSize().width-SizeUtils.translateDesignWidthToCode(80))}
    />);
  }
    _getContent(postData){
    return postData.comment;
  }
	// 每行 右上角是否回复
	getItemCommentType(isComment) {
		const color = isComment ? '#f42a26' : '#9f9f9f';
		const text = isComment ? '已回复' : '未回复';
		return (
			<View
				style={{
					height: SizeUtils.translateDesignHeightToCode(32),
					width: SizeUtils.translateDesignWidthToCode(84),
					borderWidth: SizeUtils.translateDesignNumToCode(3),
					borderColor: color,
					borderRadius: SizeUtils.translateFontSizeToCode(6),
					alignItems: 'center',
					justifyContent: 'center'
				}}
			>
				<Text style={{ color, fontSize: SizeUtils.translateFontSizeToCode(22) }}>
					{text}
				</Text>
			</View>
		);
	}
}
